<template>
	<view class="house">
		<view class="content dis-flex">
			<view :class="fag?'seach_card':'seach_card_new'">
				<u-dropdown ref="uDropdownSeach" title-size='28'  @open="switchDrp('uDropdown')" @close='closeDrp()'>
					<u-dropdown-item :title="seachId == 10?'标题':'房东'">
						<view class="slot-content" style="background-color: #FFFFFF;">
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20" :class="seachId == 10?'errorClass':''" @click="seachSelect(10)">标题</view>
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20" :class="seachId == 20?'errorClass':''" @click="seachSelect(20)">房东</view>
						</view>
					</u-dropdown-item>
					</u-dropdown>
			</view>
			<u-search placeholder="输入内容" v-model="listing_title" shape="round" :show-action="true" action-text="搜索"
				@custom='seachText'></u-search>
		</view>
		<view>
			<u-dropdown ref="uDropdown" title-size='35' @open="switchDrp('uDropdownSeach')">
				<u-dropdown-item title="租金">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<scroll-view scroll-y="true" style="height: 400rpx;">
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20"
								:class="[item.check?'errorClass':'']" v-for="(item,index) in rentList" :key='this'
								@click="switchTab(rentList,index,'priceRange')">{{item.text}}</view>
						</scroll-view>
						<view class="dis-flex flex-x-between custom">
							<view class="dis-flex  flex-x-center">
								<view class="min_price">
									<u-input v-model="min_price" placeholder='最低价格' type='number'
										input-align='center' />
								</view>
								<view>
									<u-icon name="minus"></u-icon>
								</view>
								<view class="min_price">
									<u-input v-model="max_price" placeholder='最高价格' type='number'
										input-align='center' />
								</view>
							</view>
							<u-button type="primary" @click="closeDropdown" size='medium'>确定</u-button>
						</view>

					</view>
				</u-dropdown-item>
				<u-dropdown-item title="房型">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<scroll-view scroll-y="true" style="height: 400rpx;">
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20"
								:class="[item.check?'errorClass':'']" v-for="(item,index) in houseType" :key='this'
								@click="switchTab(houseType,index,'layout')">{{item.text}}</view>
						</scroll-view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item title="排序">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<scroll-view scroll-y="true" style="height: 400rpx;">
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20"
								:class="[item.check?'errorClass':'']" v-for="(item,index) in sort" :key='this'
								@click="switchTab(sort,index)">{{item.text}}</view>
						</scroll-view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
			<uniList :housingList='housingList' class="content" v-if='housingList'></uniList>
			<view class="dis-flex flex-x-center flex-y-center f-24 col-9" v-else>暂无房源信息</view>
		</view>
		<!-- 返回顶部 -->
		<view>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
		<!-- 消息提示 -->
		<u-toast ref="uToast" />
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>

</template>

<script>
	import uniList from '../../components/houseList.vue';
	export default {
		data() {
			return {
				tabbar: '',
				scrollTop: 0,
				listing_title: '',
				housingList: [], // 房源数据
				rentList: [
					{
							id: "-1",
							text: "全部",
							check: false
						},{
						id: "",
						text: "0-500",
						check: false
					},
					{
						id: "",
						text: "500-1000",
						check: false
					},
					{
						id: "",
						text: "1000-1500",
						check: false
					},
					{
						id: "",
						text: "1500-2000",
						check: false
					},
					{
						id: "",
						text: "2000-3000",
						check: false
					},
					{
						id: "",
						text: "3000-5000",
						check: false
					},
					{
						id: "",
						text: "5000以上",
						check: false
					}
				], //租金
				houseType: [
					{
							id: "-1",
							text: "全部",
							check: false
						},
					{
						id: "",
						text: "单间",
						check: false
					},
					{
						id: "",
						text: "一房一厅",
						check: false
					},
					{
						id: "",
						text: "两房一厅",
						check: false
					},
					{
						id: "",
						text: "三房一厅",
						check: false
					},
					{
						id: "",
						text: "复式（LOFT）",
						check: false
					},
				], //房型
				sort: [{
						id: "1",
						text: "默认排序",
						check: false,
						type: 'timeSort'
					},
					{
						id: "1",
						text: "价格从高到低",
						check: false,
						type: 'priceSort'
					},
					{
						id: "0",
						text: "价格从低到高",
						check: false,
						type: 'priceSort'
					},
					{
						id: "1",
						text: "发布从新到旧",
						check: false,
						type: 'timeSort'
					},
					{
						id: "0",
						text: "发布从旧到新",
						check: false,
						type: 'timeSort'
					}
				], //排序
				min_price: '', //最低价格
				max_price: '', //最高价格
				page: 1,
				priceRange: '',
				layout: '',
				timeSort: 1,
				priceSort: '',
				seachId:10,
				fag:false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		components: {
			uniList
		},
		onLoad() {
			this.tabbar = getApp().globalData.tabbar;
			this.getByPage(false, this.page);
		},
		onShow() {
			
		},
		// 上拉刷新
		onPullDownRefresh() {
			this.getByPage(false, this.page)

		},
		methods: {
			// 搜索
			seachText() {
				if(this.seachId == 0){
					this.$refs.uToast.show({
						title: "请先选择搜索类型",
						type: 'error',
					})
					return false
				}
				this.getByPage(false, 1, this.listing_title, this.priceRange, '', this.layout, this.priceSort, this.timeSort)
			},
			getByPage(flag, page, title, priceRange, price, layout, priceSort, timeSort) {
				this.$u.api.searchByPage({
					pageNo: page,
					pageSize: 15,
					title:this.seachId == 10? title || '':'',
					price: price || '',
					priceRange: priceRange || '',
					layout: layout || '',
					priceSort: priceSort || -1,
					timeSort: timeSort || 1,
					masterName:this.seachId == 20? title || '':'',
				}).then(res => {
					// 停止刷新
					uni.stopPullDownRefresh();

					res.data.forEach(ele => {
						ele.characteristic = ele.characteristic ? ele.characteristic.split(",") : []
					})
					if (flag) {
						res.data = this.housingList.concat(res.data);
						this.housingList = res.data;

					} else {
						this.housingList = res.data;
					}
				})
			},
			// 关闭筛选栏
			closeDropdown() {
				this.rentList.forEach(ele => {
					ele.check = false;
				})
				this.$refs.uDropdown.close();
				this.priceRange = `${this.min_price}-${this.max_price}`
				this.getByPage(false, 1, this.listing_title, this.priceRange, '', this.layout, this.priceSort, this.timeSort)
			},
			seachSelect(val){
				this.listing_title = '';
				this.seachId = val;
				this.$refs.uDropdownSeach.close();
			},
			switchDrp(name){
				this.fag = true;
				this.$refs[name].close();
			},
			closeDrp(){
				this.fag = false;
			},
			// 切换选择
			switchTab(val, index, type) {
				val.forEach(ele => {
					ele.check = false;
				})
				val[index].check = true;
				this[type] = val[index].text;
				this.page = 1;
				if (type) {
					this.getByPage(false, 1, this.listing_title, type == 'priceRange' ? this.filterValue(val[index]) : this.priceRange, '', type ==
						'layout' ? this.filterValue(val[index]) : this.layout)
				} else {
					var type = val[index].type
					if (val[index].type == 'priceSort') {
						this.priceSort = val[index].id;
						this.timeSort = -1;
					}
					if (val[index].type == 'timeSort') {
						this.timeSort = val[index].id;
						this.priceSort = -1;
					}

					this.getByPage(false, 1, this.listing_title,  this.priceRange, '', this.layout, val[index].type == 'priceSort' ? val[index].id : '', val[index]
						.type == 'timeSort' ?
						val[index].id : '')

				}
				this.$refs.uDropdown.close();
			},
			filterValue(val){
				let text = ''
				if(val.id == -1){
					text = ''
				}else{
					text = val.text;
				}
				return text
			}

		},
		// 页面滚动到底部的事件
		onReachBottom() {
			this.getByPage(true, ++this.page, this.listing_title, this.priceRange, '', this.layout, this.priceSort, this.timeSort)
		}
	}
</script>

<style scoped>
	.content {
		margin: 24rpx 30rpx;
	}

	.u-text-center {
		border-bottom: 1rpx solid #F7F7F7;
		height: 60rpx;
		line-height: 60rpx;
	}

	.errorClass {
		color: #E41010;
	}

	.min_price {
		width: 150rpx;
		background: rgb(225, 226, 228);
		text-align: center;
		margin: 5rpx;
	}

	.custom {
		padding: 20rpx;
	}

	.custom uni-button {
		margin: 0;
		padding: 0 60rpx;
	}

	.house {
		padding-bottom: 100rpx;
	}
	.seach_card,.seach_card_new{
		width: 200rpx;
		}
	.seach_card /deep/ .u-dropdown__content__mask,.seach_card_new  /deep/ .u-dropdown__content__mask{
		background: transparent;
	}
	.seach_card /deep/ .u-dropdown__content{
		z-index: 50 !important;
	}
</style>
